혼자 공부하는 바이브 코딩 — 2장 효과적인 프롬프트로 AI 200% 활용하기 딥다이브 학습 노트

출처: 혼자 공부하는 바이브 코딩 with 클로드 코드 (조태호) | 참고: https://github.com/taehojo/vibecoding

2장에서 다루는 내용

• 좋은 프롬프트의 3가지 조건 — 명확성, 구체성, 맥락 제공
• 5W1H 원칙으로 기획서(PRD) 작성 — Why, Who, What, When, Where, How
• 프롬프트 템플릿 활용 — 재사용 가능한 질문 구조
• 4단계 포트폴리오 전략 — 뼈대 → 기능 → 디자인 → 점검

전체 흐름도

[프롬프트 원리]              [기획서(PRD)]              [실전: 포트폴리오]
    |                          |                          |
    v                          v                          v
+-----------------+   +------------------+   +-------------------------+
| 02-1            |   | PRD 작성법         |   | 02-2                    |
| 좋은 프롬프트의  |   |                  |   | 4단계 포트폴리오 전략    |
| 3가지 조건      |-->| 5W1H 원칙        |-->|                         |
|                 |   | Why: 왜 만드는가   |   | 1단계: 뼈대 (HTML 구조)  |
| • 명확성        |   | Who: 누구를 위해   |   | 2단계: 기능 (콘텐츠)     |
| • 구체성        |   | What: 무엇을      |   | 3단계: 디자인 (CSS)      |
| • 맥락 제공     |   | How: 어떻게       |   | 4단계: 점검 (QA)         |
+-----------------+   +------------------+   +-------------------------+
                                                   |
                                              각 단계마다
                                           요청 → 생성 → 확인 → 수정
                                              반복 사이클

선수 지식 체크리스트

• [ ] 1장: 클로드 아티팩트 사용법 (웹페이지 만들기)
• [ ] 프롬프트의 기본 개념 (AI에게 전달하는 지시)
• [ ] HTML 섹션(section) 개념 (선택, 없어도 가능)

핵심 키워드

02-1 AI를 깨우는 프롬프트의 비밀

한 줄 요약

좋은 프롬프트는 명확성 + 구체성 + 맥락 제공 3가지를 충족해야 한다.

쉬운 설명 (내비게이션 비유)

"내비게이션에 '좋은 데로 데려다 줘'라고 입력하면 정확한 안내를 받을 수 없다. '서울역에서 강남역까지 가장 빠른 길'이라고 입력해야 효율적인 루트를 안내받을 수 있다."

프롬프트도 마찬가지: - 모호한 프롬프트: "멋진 나만의 시작 홈페이지를 만들어 줘." → '멋지다'가 뭔지 AI가 판단 불가 - 좋은 프롬프트: "밝고 깔끔한 스타일을 선호해. 시계와 검색바도 추가해 줘. 기술 관련 뉴스를 보여 줘." → 스타일/기능/콘텐츠가 구체적

좋은 프롬프트의 3가지 조건

AI와 프롬프트 개선하기 — 대화형 접근

처음부터 완벽한 프롬프트를 쓸 필요 없다!

Step 1: 모호하게 시작
"오늘의 날씨와 주요 뉴스를 보여 주는 나만의 시작 홈페이지를 만들고 싶어."

Step 2: AI가 되묻는 질문에 답하기
AI: "어떤 스타일이나 디자인을 선호하시나요?"
AI: "날씨 외에 다른 기능도 포함하고 싶으신가요?"
AI: "뉴스는 어떤 종류를 원하시나요?"

Step 3: 구체적으로 발전
"밝고 깔끔한 스타일을 선호해. 시계와 검색바도 추가해 줘. 기술 관련 뉴스를 보여 줘."

→ AI의 질문에 답하는 과정 자체가 프롬프트를 개선하는 과정!

제품 기획서(PRD) 작성하기

5W1H 핵심 질문

┌────────────────────────────────────────────────────────┐
│ Why:   왜 만드는가?        → 목적을 명확히            │
│ Who:   누구를 위한 것인가? → 대상을 정의              │
│ What:  무엇을 만들 것인가? → 기능을 구체화            │
│ When:  언제 사용되는가?    → 사용 맥락 파악            │
│ Where: 어디서 사용되는가?  → 구현 방법 결정            │
│ How:   어떻게 구현하는가?  → 기술적 세부 명시          │
│                                                        │
│ 특히 소프트웨어 개발에서는 What과 How가 더욱 중요!      │
└────────────────────────────────────────────────────────┘

프롬프트 템플릿 (바로 복사해서 사용!)

프롬프트 템플릿:
──────────────────────────────────────────────
[무엇]을 만들려고 해.
주요 기능은 [구체적인 기능 설명]이야.
[누구]를 위한 것이고,
[왜/어떤 문제를 해결하기] 위해 필요해.
어떻게 구현하면 좋을지 기술적인 방향과 함께
구체적인 PRD를 작성해 줘.
──────────────────────────────────────────────

실제 사용 예시

프롬프트:
포트폴리오 웹페이지를 만들려고 해.
주요 기능은 채용 담당자가 30초 안에 내 역량을 파악할 수 있는
임팩트 있는 구성이야.
프리랜서 전환을 준비하는 마케터를 위한 것이고,
경쟁력 있는 지원자로 보이기 위해 필요해.
어떻게 구현하면 좋을지 기술적인 방향과 함께 구체적인 PRD를 작성해 줘.

→ 클로드가 체계적인 PRD를 작성해 줌!

핵심 체크포인트

• ✅ 좋은 프롬프트 = 명확성 + 구체성 + 맥락 제공
• ✅ 처음부터 완벽할 필요 없음 — AI와 대화하며 점진적으로 개선
• ✅ 5W1H 원칙으로 체계적인 PRD를 작성
• ✅ 템플릿을 활용하면 누구나 좋은 프롬프트 작성 가능

02-2 실전! 마케팅 포트폴리오 완성하기

한 줄 요약

PRD를 바탕으로 뼈대 → 기능 → 디자인 → 점검 4단계 전략으로 웹페이지를 완성한다.

쉬운 설명 (집 짓기 비유)

"집을 지을 때 벽지부터 고르지 않는다. ① 설계도(뼈대) → ② 배관/전기(기능) → ③ 인테리어(디자인) → ④ 준공 검사(점검) 순서로 짓는다. 웹페이지도 마찬가지!"

왜 4단계로 나누는가?

❌ 한 번에 요청: "이 기획서대로 웹페이지 만들어 줘"
→ HTML, CSS, 자바스크립트가 뒤섞인 복잡한 코드 생성
→ 수정 시 어디를 고쳐야 할지 파악 어려움
→ 모든 요청 사항이 반영되었는지 확인 불가

✅ 4단계로 나눠 요청: 뼈대 → 기능 → 디자인 → 점검
→ 각 단계마다 명확한 목표를 달성하고 검증
→ 짧은 사이클을 여러 번 거치면서 점점 완성
→ 오류와 누락 가능성을 대폭 줄임

4단계 실습 따라하기

1단계: 뼈대 (HTML 구조)

프롬프트:
"이 PRD대로 진행할 거야. 먼저 PRD를 기반으로 HTML 문서를 작성해 줘.
 섹션을 나누고, 수정을 대비해 각 섹션에 고유한 이름을 붙여 줘.
 아직 기능은 구현하지 말고, 전체 구조만 보여 줘."

결과: 9개 섹션으로 구조화된 HTML 뼈대
1. #main-navigation — 상단 고정 네비게이션
2. #hero-introduction — Hero Section (30초 임팩트)
3. #performance-metrics — Quick Stats (10초 톡톡)
4. #core-competencies — 본문 역량 소개
5. #case-studies — 선별된 프로젝트 케이스
6. #technical-stack — 도구 및 기술 스택
7. #client-feedback — 고객 추천사
8. #contact-information — 연락처 및 CTA
9. #site-footer — 푸터

핵심: 각 섹션에 고유한 이름(ID)을 부여 → 나중에 특정 부분만 수정 가능!

2단계: 기능 (콘텐츠 입력)

프롬프트:
"나의 경력 포트폴리오는 다음과 같아. 섹션별로 다음 내용을 참고해서
 업데이트해 줘.

나는 3년차, 퍼포먼스/콘텐츠 마케팅 전문가야.
- 핵심 성과: ROAS 200%, 25개 캠페인, 연 8억 매출 기여
- 3년간 포지션 변화: 주니어(2023) → 퍼포먼스 마케터(2024) → 매니저(2025)
..."

핵심: AI에게 "내용을 채워 줘"가 아니라 구체적이고 사실적인 정보를 제공!

3단계: 디자인 (CSS + 레퍼런스)

프롬프트:
"워드프레스 테마 중에서 이 포트폴리오와 가장 잘 어울리는 것을 하나
 선택해서 디자인을 수정해 줘. 섹션별로 색상 톤을 달리 해서 구분이
 잘 되게 해 줘."

핵심: 구체적인 레퍼런스(워드프레스 테마)를 제공하여 전문적인 디자인 완성!

결과:
- Hestia Pro 스타일 기반 Material Design 적용
- Material Kit 기반의 그리드 레이아웃, 반응형 패널
- 깊이감 있는 그림자 효과 + 글래스모피즘
- 세계적인 Typography 시스템 (Display, Headline, Title, Body)

4단계: 점검 (QA)

프롬프트:
"포트폴리오 웹페이지의 모든 부분이 잘 만들어졌는지 검토해 줘.
 PRD대로 제작되었는지, 각 링크가 문제없이 작동하는지 확인해."

AI가 자동으로:
✅ PRD 요구사항 달성도 검토
✅ 누락된 기능이나 오류 발견
✅ 개선 방향까지 제안

발견된 개선점 3가지를 보완 및 수정하고, 완벽한 프리랜서 전환용
포트폴리오를 완성.

핵심 체크포인트

• ✅ 한 번에 모든 것을 요청하지 말고 4단계로 나눠서 요청
• ✅ 각 단계마다 요청 → 생성 → 확인 → 수정 반복
• ✅ 섹션에 고유한 이름(ID)을 부여하면 특정 부분만 수정 가능
• ✅ 디자인 단계에서 레퍼런스(워드프레스 테마 등)를 제공하면 품질 향상
• ✅ 점검 단계에서 AI에게 QA를 요청하면 누락과 오류를 자동 발견

연습문제 풀이

Q1: 포트폴리오 웹사이트를 만들 때 사용한 4단계 전략의 올바른 순서는?

A: ③ 기본 틀 잡기 → 핵심 기능 넣기 → 디자인 입히기 → 완성도 점검. 뼈대 → 기능 → 디자인 → 점검 순서이다.

Q2: 효과적인 프롬프트 작성 방법으로 옳지 않은 것은?

A: ② "모든 기능을 한 번에 요청하여 시간을 절약한다"가 옳지 않다. 한 번에 모든 것을 요청하면 코드가 복잡해지고 수정이 어렵다. 단계별로 나눠서 요청하는 것이 효과적이다.

Q3: 섹션에 고유한 이름을 붙이면 생기는 장점이 아닌 것은?

A: ④ "자동으로 디자인이 개선된다"는 장점이 아니다. 고유 이름의 장점은: 원하는 부분만 정확히 수정, 전체 코드를 다시 생성하지 않아도 됨, AI가 수정할 위치를 명확히 이해.

부록 A: 용어 사전

부록 B: 핵심 비교표

모호한 프롬프트 vs 좋은 프롬프트

한 번에 요청 vs 4단계 전략

부록 C: 추천 참고 자료 & 링크